<template>
  <!-- 登录内容组件 -->
  <div class="login-content">
    <div class="input user">
      <input type="text" placeholder="用户名/邮箱/已验证手机" @focus="displayText" @blur="displayText" v-model="username"/>
      <i class="icon icon-guanbi" v-show="hideText" @click="clearUsername"></i>
    </div>
    <div class="input password">
      <input :type="inputType" placeholder="请输入密码" @focus="displayPassword" @blur="displayPassword" v-model="password"/>
      <i class="icon icon-guanbi" v-show="hidePassword" @click="clearPassword"></i>
      <i v-show="flag" class="icon icon-biyanjing" @click="change"></i>
      <i v-show="!flag" class="icon icon-yanjing" @click="change"></i>
      <a href="#">忘记密码</a>
    </div>
    <div class="error">{{errName}}</div>
    <button class="login-btn" :class="{'active':username.trim() && password.trim()}" @click="loginBtn">登 录</button>
    <div class="register">快速注册</div>
    <div class="other-login">
      <div class="other-head">
        <i></i>
        <span>其它登录方式</span>
        <i></i>
      </div>
      <div class="other-icon">
        <div>
          <i class="icon icon-qq"></i>
          <p>QQ</p>
        </div>
        <div>
          <i class="icon icon-weixin1"></i>
          <p>微信</p>
        </div>
      </div>
      <div class="agreement">
        <span>登录即代表您已同意</span>
        <a>知心购隐私政策</a>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {Toast} from 'vant'
Vue.use(Toast)

import {login} from '@/api/index.js'
// 辅助函数
import {mapMutations} from 'vuex'
export default {
  data() {
    return {
      // 切换眼睛
      flag: true,
      // 切换 input 状态
      inputType: "password",
      // 默认用户名后面的X为隐藏
      hideText: false,
      // 默认密码后面的X为隐藏
      hidePassword: false,
      // 获取用户输入的用户名
      username:"",
      // 获取用户输入的密码
      password:"",
      // 用户账号或密码输入错误时报错，
      errName:''
    };
  },
  methods: {
    ...mapMutations(['setToken']),
    change() {
      // 点击切换眼睛和密码框的状态
      this.flag = !this.flag;
      if (this.flag) {
        this.inputType = "password";
      } else {
        this.inputType = "text";
      }
    },
    // 点击X时隐藏自己和清空input里面的内容
    clearUsername(){
      this.username = ""
      this.hideText = false
    },
    clearPassword(){
      this.password = ""
      this.hidePassword = false
    },
    // 聚焦时展示后面的X
    displayText(){
      this.hideText = !this.hideText
    },
    displayPassword(){
      this.hidePassword = !this.hidePassword
    },
    loginBtn(){
      // 登录请求
      login({username:this.username,password:this.password},(res)=>{
        // 状态成功
        if(res.status === 0){
          // 判断用户名密码不能为空
          if(this.username.trim() || this.password.trim()){
            this.setToken({token:res.data.token})
            this.$router.replace('/user')

            // 登录完成 获取用户信息
            this.$store.dispatch('getUserIfon')
            // 登录完成 获取购物车信息
            this.$store.dispatch('getCartList')
          }else{
            Toast.fail('用户名密码不能为空');
          }
        }else{
          this.errName = res.msg ? res.msg : '登录失败'
          Toast.fail(this.errName);
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
  .login-content {
    width: 100%;
    padding: 88px 50px;
    box-sizing: border-box;
  }
  .input {
    margin-top: 20px;
    padding: 20px 0;
    font-size: 32px;
    border-bottom: 1px solid #dcdcdc;
  }
  .user {
    margin-top: 60px;
  }
  input {
    line-height: 60px;
  }
  .user input {
    width: 604px;
  }
  .password input {
    width: 325px;
    margin-right: 34px;
  }
  .input i {
    font-size: 40px;
    color: #ccc;
  }
  .icon-biyanjing,
  .icon-yanjing {
    padding-right: 30px;
    margin-left: 70px;
  }
  .password a {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    border-left: 1px solid #dcdcdc;
  }
  .error {
    color: red;
    font-size: 26px;
    padding: 30px 0;
    height: 90px;
    box-sizing: border-box;
  }
  .login-btn {
    width: 650px;
    height: 100px;
    font-size: 32px;
    color: white;
    border-radius: 100px;
    background-color: rgba(246, 53, 21, 0.5);
  }
  .login-btn.active {
    background-color: #f63515;
  }
  .register {
    float: right;
    padding: 40px 0;
    font-size: 28px;
    color: rgb(153, 153, 153);
  }
  .other-login {
    margin-top: 100px;
  }
  .other-head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    text-align: center;
  }
  .other-head i {
    flex: 33%;
    height: 1px;
    background-color: #dcdcdc;
  }
  .other-head span {
    flex: 33%;
    font-size: 28px;
    color: rgb(220, 220, 220);
  }
  .other-icon {
    display: flex;
    justify-content: space-evenly;
    margin: 0 165px;
    padding: 40px 0;
    text-align: center;
  }
  .other-icon i {
    display: inline-block;
    width: 96px;
    height: 96px;
    line-height: 96px;
    border-radius: 50%;
    font-size: 60px;
  }
  i.icon-qq {
    background-color: rgb(231, 247, 254);
    color: rgb(21, 184, 245);
  }
  i.icon-weixin1 {
    background-color: rgb(230, 248, 230);
    color: rgb(9, 187, 7);
  }
  .other-icon p {
    margin-top: 20px;
    color: rgb(153, 153, 153);
  }
  .agreement {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
  .agreement a {
    color: #409eff;
  }
  .password{
    position: relative;
  }
  .password .icon-guanbi{
    position: absolute;
    top: 25px;
  }
</style>